
<template>
  <div class="app-container">
    <div class="head-container" v-loading="reportLoading">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="70px"
        size="medium"
        @submit.native.prevent
      >
        <el-row style="margin-bottom: 10px">
          <el-col :span="24" class="grid-cell">
            <div style="position: absolute;right: 20px;top:10px;">
              <el-button
                class="filter-item"
                size="mini"
                type="primary"
                icon="el-icon-plus"
                @click="handleCreate"
              >选择受检单位</el-button
              >
            </div>
            <el-descriptions title="单位信息">
              <el-descriptions-item label="报告编号"
                >{{this.form.reportNo}}</el-descriptions-item
              >
              <el-descriptions-item label="委托单位"
                >{{this.form.delegateCompany.name}}</el-descriptions-item
              >
              <el-descriptions-item label="报告日期"
                >{{this.form.checkDateStart}}-{{this.form.checkDateEnd}}</el-descriptions-item
              >

              <el-descriptions-item label="受检单位">
                {{this.form.company.name}}
              </el-descriptions-item>

              <el-descriptions-item label="单位人数"
                >{{this.form.focusCount}}人</el-descriptions-item
              >

              <el-descriptions-item label="报告编制人"
                >报告编制人</el-descriptions-item
              >
            </el-descriptions>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="grid-cell">
            <el-form-item
              label="评价依据"
              prop="evaluationBasis"
              class="label-right-align"
            >
              <el-select
                v-model="form.evaluationBasis"
                class="full-width-input"
                clearable
                multiple
                filterable
                @change="inspectionChange"
              >
                <el-option
                  v-for="item in evalutionoptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24" class="grid-cell">
            <el-form-item
              label="诊断标准"
              prop="mainconclusion"
              class="label-right-align"
            >
              <el-select
                v-model="form.diagnoseStandards"
                class="full-width-input"
                clearable
                multiple
                filterable
                @change="diagnosticChange"
              >
                <el-option
                  v-for="item in diagnosticoptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="static-content-item">
          <el-divider direction="horizontal" />
        </div>
        <el-row>
          <el-descriptions title="危害分析" />
          <el-col :span="24" class="grid-cell">
            <el-tabs v-model="harmstab">
              <el-tab-pane
                v-for="(ele,index) in form.harmWorkStatusGroupAnalysises"
                :label="ele.harmfactor"
                :name="String(ele.harmfactor)"
                :key="index"
              >
                <el-row :gutter="30">
                 <el-col :span="16">
                  <el-form-item
                    label="职业病危害因素类别"
                    prop="harmfactor"
                    label-width="140px"
                    class="label-right-align"
                  >
                    <el-input
                      v-model="ele.harmfactor"
                      placeholder="请输入职业病危害因素类别"
                      readonly
                    />
                  </el-form-item>
                  <el-form-item
                    label="检查项目"
                    prop="reportCheckItem"
                    class="label-right-align"
                  >
                    <el-input
                      v-model="ele.reportCheckItem"
                      placeholder="请输入检查项目"
                      readonly
                    />
                  </el-form-item>
                   <el-row>
                     <el-col :span="12">
                       <el-form-item
                         label="在岗状态"
                         prop="workStatus"
                         class="label-right-align"
                       >
                         <el-select
                           v-model="ele.workStatus"
                           class="full-width-input"
                           placeholder="请选择在岗状态"
                           disabled
                         >
                           <el-option
                             v-for="dict in dict.type.dime_physical_work"
                             :key="dict.value"
                             :label="dict.label"
                             :value="dict.value"
                           ></el-option>
                         </el-select>
                       </el-form-item>
                     </el-col>
                     <el-col :span="12">
                       <el-form-item
                         label="人数"
                         prop="number"
                         class="label-right-align"
                       >
                         <el-input
                           v-model="ele.number"
                           placeholder="请输入人数"
                           readonly
                         />
                       </el-form-item>
                     </el-col>
                   </el-row>
                   <el-form-item
                     label="选检项目"
                     prop="chosenCheck"
                     class="label-right-align"
                   >
                     <el-input
                       v-model="ele.chosenCheck"
                       placeholder="请输入选检项目"
                     />
                   </el-form-item>
                </el-col>
                 <el-col :span="8">
                 <el-divider content-position="left" style="margin: 16px 0"
                   >必检项目</el-divider
                   >
                  <el-table
                    :ref="`multipleTable${index}`"
                    border
                    stripe
                    :data="ele.mustCheck"
                    height="179px"
                    size="small"
                  >
                    <el-table-column
                      type="index"
                      align="center"
                      label="No."
                      width="50">
                    </el-table-column>
                    <el-table-column label="项目名称" align="center" prop="itemName"/>
                  </el-table></el-col>
                </el-row>
                <el-row :gutter="20">
                 <el-col :span="12">
                  <el-form-item
                    label="疾病汇总"
                    prop="harmFactorDisease"
                    class="required label-right-align"
                  >
                    <el-input
                      type="textarea"
                      :rows="7"
                      placeholder="请输入内容"
                      v-model="ele.harmFactorDisease"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="分析汇总"
                      prop="harmWorkStatusAnalysis"
                      class="required label-right-align"
                    >
                      <el-input
                        type="textarea"
                        :rows="7"
                        placeholder="请输入内容"
                        v-model="ele.harmWorkStatusAnalysis"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <div class="static-content-item">
          <el-divider direction="horizontal" />
        </div>
        <el-row>
          <el-descriptions title="单危害因素结果分析" />
          <el-col :span="24" class="grid-cell">
            <el-tabs v-model="singleharmstab" style="margin-bottom: 10px">
              <el-tab-pane
                v-for="(ele,index) in form.harmAnalysises"
                :label="ele.harmName"
                :name="String(ele.harmName)"
                :key="index"
              >
                <el-row>
                  <el-col :span="24">
                      <el-input
                        type="textarea"
                        :rows="7"
                        placeholder="请输入内容"
                        v-model="ele.harmAnalysisStr"
                      >
                      </el-input>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <div class="static-content-item">
          <el-divider direction="horizontal" />
        </div>
        <el-row>
          <el-descriptions title="体检结果总述" />
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.resultDesc"
            style="margin-bottom: 10px"
          >
          </el-input>
        </el-row>
        <div class="static-content-item">
          <el-divider direction="horizontal" />
        </div>
        <el-row>
          <el-descriptions title="意见建议" />
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.processAdvice"
          >
          </el-input>
        </el-row>
        <el-row>
        </el-row>

      </el-form>
    </div>
    <el-dialog
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :title="formTitle"
      width="70%"
      @close="cancel()"
    >
      <div v-loading="listLoading">
        <el-form ref="checkForm" :model="checkForm" :rules="checkrules" label-width="100px">
          <el-row>
            <el-col :span="7" class="grid-cell">
              <el-form-item
                label="单位名称"
                prop="companyId"
                class="required label-right-align"
              >
                <el-select
                  v-model="checkForm.companyId"
                  class="full-width-input"
                  clearable
                  filterable
                  style="width: 95%"
                  @change="companyChange"
                >
                  <el-option
                    v-for="(item, index) in companyList"
                    :key="index"
                    :label="item.companyName"
                    :value="item.id"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7" class="grid-cell">
              <el-form-item
                label="检查日期"
                prop="checkDate"
                class="required label-right-align"
              >
                <el-date-picker
                  style="width: 95%"
                  v-model="checkForm.checkDate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="grid-cell">
              <el-form-item
                label="在岗状态"
                prop="workStatus"
                class="required label-right-align"
              >
                <el-select
                  v-model="checkForm.workStatus"
                  class="full-width-input"
                  style="width: 95%"
                  clearable
                  filterable
                  multiple
                >
                  <el-option
                    v-for="dict in dict.type.dime_physical_work"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="grid-cell">
              <el-button
                class="filter-item"
                size="mini"
                type="success"
                icon="el-icon-search"
                @click="SearchPersons"
              >搜索
              </el-button>
            </el-col>
          </el-row>

          <el-row>
            <el-col>
              <el-table
                ref="multipleTable"
                border
                stripe
                :data="Perosnlist"
                size="small"
                style="width: 100%"
                max-height="500px"
                @sort-change="sortChange"
                @selection-change="handleSelectionChange"
                @row-click="handleRowClick"
              >
                <el-table-column type="selection" width="44px" :selectable="selectable"/>
                <el-table-column label="体检编号" align="center" prop="checkCode" width="200"/>
                <el-table-column label="姓名" align="center" prop="name" />
                <el-table-column label="性别" align="center" prop="sex" width="80">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
                  </template>
                </el-table-column>
                <el-table-column label="证件号" align="center" width="200" prop="idNo" />
                <el-table-column label="证件类型" align="center" prop="idNoType">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.dime_physical_certificate" :value="scope.row.idNoType"/>
                  </template>
                </el-table-column>
                <el-table-column label="体检类型" align="center" prop="checkType">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.dime_physical_type" :value="scope.row.checkType"/>
                  </template>
                </el-table-column>
                <el-table-column label="完成状态" align="center" prop="completStatus">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.dime_physical_completstatus" :value="scope.row.completStatus"/>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="registerDate"
                  label="登记日期"
                  width="120px"
                  align="center"
                />
                <el-table-column
                  prop="checkDate"
                  label="体检日期"
                  width="120px"
                  align="center"
                />
              </el-table>
            </el-col>
          </el-row>
        </el-form>
        <div
          slot="footer"
          align="right"
          style="margin-right: 30px;margin-top: 20px"
        >
          <el-button size="medium" type="primary" @click="SavePersons"
          >确认</el-button
          >
        </div>
      </div>
    </el-dialog>
    <div align="right" style="padding: 10px 20px 0 0">
      <el-button size="medium" type="text" @click="resetForm()"
      >重置</el-button
      >
      <el-button
        size="medium"
        type="primary"
        @click="save"
      >确认</el-button
      >
    </div>
  </div>
</template>
<script>

import { listBasecompany } from '@/api/physical/basecompany'
import { searchemployees,occupationalHealthCheck,occupationalhealthchecksave,listBaseevaluation,listBasediagnosisstandard } from '@/api/physical/physicaloccupational'

const defaultForm = {
  "checkDateEnd": "",
  "checkDateStart": "",
  "checkMains": [
    {
      "channel": "",
      "checkCode": "",
      "checkDate": "",
      "checkResult": "",
      "checkType": "",
      "completStatus": "",
      "dept": "",
      "empNo": "",
      "focusTag": "",
      "harmStr": "",
      "harmVOS": [
        {
          "harmId": "",
          "harmName": ""
        }
      ],
      "harmfactor": "",
      "id": "",
      "idNo": "",
      "idNoType": "",
      "jobType": "",
      "mainCheckDate": "",
      "mainConclusion": "",
      "name": "",
      "personType": "",
      "registerDate": "",
      "reportPrintDate": "",
      "reportPrinter": "",
      "sex": "",
      "workStatus": "",
      "workStatusName": ""
    }
  ],
  "company": {
    "address": "",
    "contact": "",
    "id": "",
    "name": "",
    "phone": ""
  },
  "crowdHarmfactor": "",
  "delegateCompany": {
    "address": "",
    "contact": "",
    "id": "",
    "name": "",
    "phone": ""
  },
  "diagnoseStandards": [],
  "ees": [
    {
      "checkMains": [
        {
          "checkCode": "",
          "checkDate": "",
          "conclusions": {
            "checkDate": "",
            "conclusion": "",
            "conclusionId": "",
            "contraindicationTag": "",
            "occupationalTag": "",
            "otherTag": "",
            "passTag": 0,
            "recheckTag": ""
          },
          "id": ""
        }
      ],
      "harmCombs": [
        {
          "combos": [
            {
              "combId": "",
              "combName": ""
            }
          ],
          "harmCode": "",
          "harmId": "",
          "harmName": ""
        }
      ],
      "harmConclusions": [
        {
          "conclusions": {
            "checkDate": "",
            "conclusion": "",
            "conclusionId": "",
            "contraindicationTag": "",
            "occupationalTag": "",
            "otherTag": "",
            "passTag": 0,
            "recheckTag": ""
          },
          "harmCode": "",
          "harmId": "",
          "harmName": ""
        }
      ],
      "harmStr": "",
      "idNo": "",
      "idNoType": "",
      "marriage": "",
      "name": "",
      "originRegisterId": "",
      "personType": "",
      "sex": "",
      "workStatus": "",
      "workStatusName": ""
    }
  ],
  "emphasisAttention": "",
  "evaluationBasis": [],
  "focusCount": 0,
  "harmAnalysises": [
    {
      "comboAnalysises": [
        {
          "combId": "",
          "combName": "",
          "count": 0
        }
      ],
      "contraEeCount": 0,
      "diseaseEeCount": 0,
      "eeCount": 0,
      "harmAnalysisStr": "",
      "harmId": "",
      "harmName": "危害名称",
      "notPassEeNames": [],
      "otherEeCount": 0,
      "passEeCount": 0
    }
  ],
  "harmWorkStatusGroupAnalysises": [
    {
      "chosenCheck": "",
      "contras": [
        {
          "contraCode": "",
          "contraId": "",
          "contraName": ""
        }
      ],
      "diseaseCriterions": [
        {
          "diseaseCode": "",
          "diseaseId": "",
          "diseaseName": ""
        }
      ],
      "employees": [
        {
          "channel": "",
          "checkCode": "",
          "checkDate": "",
          "checkResult": "",
          "checkType": "",
          "completStatus": "",
          "dept": "",
          "empNo": "",
          "focusTag": "",
          "harmStr": "",
          "harmVOS": [
            {
              "harmId": "",
              "harmName": ""
            }
          ],
          "harmfactor": "",
          "id": "",
          "idNo": "",
          "idNoType": "",
          "jobType": "",
          "mainCheckDate": "",
          "mainConclusion": "",
          "name": "",
          "personType": "",
          "registerDate": "",
          "reportPrintDate": "",
          "reportPrinter": "",
          "sex": "",
          "workStatus": "",
          "workStatusName": ""
        }
      ],
      "harmFactorDisease": "",
      "harmWorkStatusAnalysis": "",
      "harmfactor": "危害名称",
      "mustCheck": [],
      "number": "",
      "reportCheckItem": "",
      "workStatus": "",
      "workStatusName": ""
    }
  ],
  "harmWorkstatusAnalysises": [
    {
      "contras": {
        "contras": [
          {
            "contraCode": "",
            "contraId": "",
            "contraName": ""
          }
        ],
        "harmId": "",
        "harmName": "",
        "workStatus": "",
        "workStatusName": ""
      },
      "contrasAnalysisStr": "",
      "diseases": {
        "diseaseCriterions": [
          {
            "diseaseCode": "",
            "diseaseId": "",
            "diseaseName": ""
          }
        ],
        "harmId": "",
        "harmName": "",
        "workStatus": "",
        "workStatusName": ""
      },
      "diseasesAnalysisStr": "",
      "harmId": "",
      "harmName": "",
      "workStatus": "",
      "workStatusName": ""
    }
  ],
  "id": "",
  "processAdvice": "",
  "reportNo": "",
  "resultDesc": "",
  "shop": {
    "address": "",
    "companyId": 0,
    "companyName": "",
    "contact": "",
    "mnappid": "",
    "secret": "",
    "shopCode": "",
    "shopId": 0,
    "shopName": ""
  },
  "workStatus": []
};

export default {
  name: "Report",
  dicts: ['dime_physical_work','sys_user_sex','dime_physical_type','dime_physical_certificate','dime_physical_completstatus'],
  components: {},
  props: {},
  data() {
    return {
      multipleSelection:[],
      rules:{},
      checkrules: {
        companyId: [
          {
            required: true,
            message: "单位名称不可为空",
          },
        ],
        workStatus: [
          {
            required: true,
            message: "在岗状态不可为空",
          },
        ],
      },
      checkForm:{
        checkDate: "",
        companyId: "",
        workStatus: [],
      },
      submitForm:{
        "checkDateEnd": "",
        "checkDateStart": "",
        "companyId": "",
        "employees": [],
        "selectAll": true,
        "workStatus": []
      },
      form: Object.assign({}, defaultForm),
      dialogFormVisible: false,
      reportLoading: false,
      listLoading: false,
      companyList: [],
      Perosnlist: [],
      evalutionoptions: [],
      diagnosticoptions: [],
      harmstab: "危害名称",
      singleharmstab: "危害名称",
      formTitle: "选择受检人员",
      search: "",
      listQuery: {
        Filter: "",
        Sorting: "",
        SkipCount: 0,
        MaxResultCount: 10,
      },

      companyguidOptions: [],

    };
  },

  computed: {},
  watch: {},
  created() {
    this.InitMainData();
  },
  mounted() {},
  methods: {
    inspectionChange() {},

    diagnosticChange() {},


    handleCreate() {
      if(this.$refs.checkForm) {
        this.$refs.checkForm.resetFields()
        this.$nextTick(()=>{
          this.$refs.checkForm.clearValidate()
        })
      }
      this.Perosnlist=[]
      this.dialogFormVisible = true;
    },
    sortChange(data) {
      const { prop, order } = data;
      if (!prop || !order) {
        this.handleFilter();
        return;
      }
      this.listQuery.Sorting = prop + " " + order;
      this.handleFilter();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    selectable: function(row, index)
    {
      if(row.completStatus == '2'){

        return true;
      }
      return false

    },
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);
    },

    cancel() {
      this.dialogFormVisible = false;
    },


    SearchPersons() {
      this.$refs.checkForm.validate((valid) => {
        if (valid) {
          this.GetPersonList();
        }
      });
    },

    GetPersonList() {
      this.listLoading=true
      this.submitForm.employees=[]
      if(this.checkForm.checkDate){
        this.submitForm.checkDateStart=this.checkForm.checkDate[0]
        this.submitForm.checkDateEnd=this.checkForm.checkDate[1]
      }
      this.submitForm.companyId=this.checkForm.companyId
      this.submitForm.workStatus=this.checkForm.workStatus
      searchemployees(this.submitForm).then(response => {
        this.Perosnlist = response.rows;
      }).finally(()=>{
        this.listLoading=false
      });
    },

    SavePersons() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请选择受检人员',
          type: 'warning'
        })
        return
      }
      this.listLoading=true
      this.submitForm.employees=this.multipleSelection.map(item => item.id)
      occupationalHealthCheck(this.submitForm).then(response => {
        this.dialogFormVisible=false
        if(response.harmWorkStatusGroupAnalysises){
          response.harmWorkStatusGroupAnalysises.forEach(item=>{
            if(item.reportCheckItem){
              item.reportCheckItem=item.reportCheckItem.join(',')
            }
            if(item.chosenCheck){
              item.chosenCheck=item.chosenCheck.join(',')
            }
            if(!item.mustCheck) {
              item.mustCheck = []
            } else {
              item.mustCheck = item.mustCheck.map(checkItem=>{
                return {
                  itemName: checkItem
                }
              })
            }
          })
        }
        this.form=response
        this.harmstab = this.form.harmWorkStatusGroupAnalysises[0].harmfactor;
        this.singleharmstab = this.form.harmAnalysises[0].harmName;
      }).finally(()=>{
        this.listLoading=false
      });
    },

    handleFilter() {
      //this.page = 1;
      this.getList();
    },

    InitMainData() {
      this.getCompanyList();
      this.getEvaluationbaseLists();
      this.getDiagnoseLists();
    },
    getCompanyList() {
      this.reportLoading=true
      listBasecompany({pageNum: 1,
        pageSize: 100}).then(response => {
        this.companyList = response.rows;
      }).finally(()=>{
        this.reportLoading=false
      });
    },

    getEvaluationbaseLists() {
      listBaseevaluation({pageNum: 1,
        pageSize: 1000}).then(response => {
        this.evalutionoptions = response.rows;
      });
    },

    getDiagnoseLists() {
      listBasediagnosisstandard({pageNum: 1,
        pageSize: 1000}).then(response => {
        this.diagnosticoptions = response.rows;
      });
    },

    companyChange() {},

    resetForm() {
      this.form=Object.assign({}, defaultForm)
      this.harmstab = this.form.harmWorkStatusGroupAnalysises[0].harmfactor;
      this.singleharmstab = this.form.harmAnalysises[0].harmName;
    },

    save() {
      if(!this.form.company.id){
        this.$message({
          message: "请选择受检单位",
          type: "warning",
        });
        return;
      }
      this.reportLoading=true
      let reportForm = JSON.parse(JSON.stringify(this.form))
      reportForm.harmWorkStatusGroupAnalysises.forEach(item=>{
        if(item.reportCheckItem){
          item.reportCheckItem=item.reportCheckItem.split(',')
        }
        if(item.chosenCheck){
          item.chosenCheck=item.chosenCheck.split(',')
        }
        if(item.mustCheck) {
          item.mustCheck = item.mustCheck.map(checkItem=>{
            return checkItem.itemName
          })
        }
      })
      occupationalhealthchecksave(reportForm).then(response => {
        this.$modal.msgSuccess("操作成功");
        this.form=Object.assign({}, defaultForm)
        this.harmstab = this.form.harmWorkStatusGroupAnalysises[0].harmfactor;
        this.singleharmstab = this.form.harmAnalysises[0].harmName;
      }).finally(()=>{
        this.reportLoading=false
      });
    },
  },
};
</script>



<style lang="scss" scoped>
.head-container{
  height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 10px;
}
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}


.el-form-item .el-select {
  width: 100%;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 20px !important;
  }

  .el-rate {
    margin-top: 2px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: '';
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>

div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 20px;
      border: 1px solid #e1e2e3;
    }

  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.mustItem {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  margin-bottom: 6px;
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}
.el-descriptions{
  ::v-deep .el-descriptions__header {
    margin:5px 0px 10px;
  }
}
.el-divider--horizontal{
  margin: 10px 0 20px;
}
</style>

<style scoped lang="scss">
.cropper-content {
 width: 430px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  .cropper-box {
    flex: 1;
    width: 40%;
    .cropper {
      width: 300px;
      height: 200px;
    }
  }
  .show-preview {
    flex: 1;
    display: none;
    -webkit-flex: 1;
    // display: flex;
    // display: -webkit-flex;
    justify-content: center;
    .preview {
      display: none;
      overflow: hidden;
      border: 1px solid #67c23a;
      background: #cccccc;
    }
  }
}
.footer-btn {
  height: 30px;
  margin-top: 0px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  .scope-btn {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding-right: 10px;
    width: 295px;
  }
  .upload-btn {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  }
  .btn {
    outline: none;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    font-weight: 500;
    padding: 8px 15px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    margin-right: 10px;
  }
}
::v-deep .el-input.is-disabled .el-input__inner{
  color: #606266
}
</style>
